<template>
  <div class="scope-box">
    <div class="scope-title">图层控制</div>
    <div class="scope-list">
      <div :class="{ 'scope-item': true, active: item.show }" v-for="item in layerList" :key="item.id" @click="clickLayer(item)">
        {{ item.name }}
      </div>
    </div>
  </div>

  <div class="legend">
    <div class="legend-title">图例</div>
    <div class="legend-list">
      <div class="legend-item" v-show="layerList[0].show">
        <div class="label"><div class="polygon_red"></div></div>
        <div class="text">禁飞区</div>
      </div>
      <div class="legend-item" v-show="layerList[0].show">
        <div class="label"><div class="polygon_gray"></div></div>
        <div class="text">120m限飞区</div>
      </div>
      <div class="legend-item" v-show="layerList[1].show">
        <div class="label"><div class="polygon_blue"></div></div>
        <div class="text">申请范围</div>
      </div>
      <div class="legend-item" v-show="layerList[2].show">
        <div class="label img">
          <img src="@/assets/images/icons/无人机.png" alt="" />
        </div>
        <div class="text">无人机平台</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, onUnmounted } from 'vue'
import { initScopeLayer, changeRestrictFlyLayer, changeApplyCoverage, changePlatformLayer, exitScopeLayer } from '../funs/scope'
const layerList = reactive([
  { id: 0, name: '限飞范围', show: true },
  { id: 1, name: '申请范围', show: true },
  { id: 2, name: '无人机平台', show: true }
])

const clickLayer = (layer: { id: number; name: string; show: boolean }) => {
  layer.show = !layer.show

  // 控制图层显示隐藏
  switch (layer.id) {
    case 0:
      changeRestrictFlyLayer(layer.show)
      break
    case 1:
      changeApplyCoverage(layer.show)
      break
    case 2:
      changePlatformLayer(layer.show)
      break

    default:
      break
  }
}

onMounted(() => {
  // 添加图层
  initScopeLayer()
})
onUnmounted(() => {
  // 删除图层
  exitScopeLayer()
})
</script>

<style lang="scss" scoped>
.scope-box {
  position: fixed;
  z-index: 9;
  @include Left(660);
  @include Top(140);
  background: #273e5c88;
  box-shadow: -2px -2px 5px #5a7fa5;
  border: 1px solid #5a7fa5;
  border-radius: 10px;
  @include Padding(10, 10, 0, 10);
  .scope-title {
    @include Padding(10, 0, 20, 0);
    @include FontSize(20);
    font-family: Tencent;
    text-align: center;
  }
  .scope-list {
    .scope-item {
      @include Padding(10, 10, 10, 10);
      @include FontSize(20);
      @include MarginBottom(10);
      border-radius: 5px;
      text-align: center;
      border: 1px solid #32a2ec44;
      background-color: #32a2ec22;
      cursor: pointer;
    }
    .active {
      border: 1px solid #32a2ecb4;
      background-color: #32a2ec44;
    }
  }
}
.legend {
  position: fixed;
  z-index: 9;
  @include Right(40);
  @include Bottom(40);
  background: #273e5c88;
  border: 1px solid #5a7fa5;
  border-radius: 10px;
  @include Padding(10, 10, 10, 10);
  .legend-title {
    @include Padding(10, 0, 20, 10);
    @include FontSize(20);
    font-family: Tencent;
  }
  .legend-list {
    .legend-item {
      @include Padding(5, 10, 5, 10);
      @include FontSize(20);
      @include MarginBottom(5);
      border-radius: 5px;
      text-align: center;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
    .label {
      @include Width(40);
      @include MarginRight(10);
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .polygon_red {
      @include Width(30);
      @include wHeight(20);
      background-color: #ff000088;
      border: 1px solid #ff0000;
    }
    .polygon_blue {
      @include Width(30);
      @include wHeight(20);
      background-color: #3dc1d555;
      border: 1px solid #3dc1d5;
    }
    .polygon_gray {
      @include Width(30);
      @include wHeight(20);
      background-color: #33333388;
      border: 1px solid #888888;
    }
    img {
      @include Width(36);
      @include wHeight(45);
    }
  }
}
</style>
